<template>
    <div id="review">
        <div class="cText">
            <div class="TImg">
                <span style="font-size: 1.8vw;">专家评审您好!</span><br/>
                <span style="font-size: 1.5vw;">您评审的分类为：{{ '公共基础课程组' }}</span>
            </div>
            <div class="tab">
                <el-form-item label="作品名称"><el-input v-model="input" @blur="likeData" placeholder="请输入"/></el-form-item>
                <el-form-item label="状态" style="margin-left: 1.6vw;">
                    <el-select v-model="value" placeholder="Select" @change="likeData" style="width: 10vw;">
                        <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"/>
                    </el-select>
                </el-form-item>
            </div>
            <el-table :data="tableData" style="width: 100%" :border="true" >
                <el-table-column label="序号" width="90">
                    <template #default="scope">{{scope.$index + 1}}</template>
                </el-table-column>
                <el-table-column prop="title" label="作品名称" width="270">
                    <template #default="scope">{{ scope.row.title }}</template>
                </el-table-column>
                <el-table-column prop="createTime" label="提交时间" />
                <el-table-column prop="isApprove" label="得分" width="180">
                    <template #default="scope">
                        <span :style="scope.row.isApprove.length>0?{color:'green'}:{color:'red'}">
                            {{ scope.row.isApprove.length>0?'已评分':'未评分' }}
                        </span>
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template #default="scope">
                        <span style="color: blue;" @click="toReviewShow(scope.row.itemId,scope.$index)">评分</span>
                    </template>
                </el-table-column>
            </el-table>
            <el-empty v-if="tableData.length==0" image="http://localhost:8081/src/assets/img/缺省页2@2x(1).png"/>
            <!--分页组件-->
            <el-pagination
            style="margin-top: 1.2vw;float: right;"
            background
            :size="5"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="page"
            :page-size="pageSize"
            layout="total, prev, pager, next, jumper"
            :total="counts">
            </el-pagination>
        </div>

        <el-dialog v-model="isAgree" width="800" :show-close="false">
            <div class="chenluo" style="width: 100%;">
                <h2>承诺书</h2>
                <p>
                    一、本人自愿加入专家评委库，并严格通守其他各项规定和纪律，容现公正地为本次大开层评南工作。<br/>
                    二、本人将严格通守大赛评选工作的保密义务，不使用或拔露，也不许可他人便用或技器在评进工作中获愁的梦费企业和国队的基本估息、
                    观点、想法创意、知识产权、暂力成果、技术方法、商业计划、财务信息等商业秘密。<br/>
                    三、本人将严格技服大费评选规则、规程，以严肃相学的志度，喜观公正，实事水是，专业独立地参与选工作，由 提出评隐息见，
                    并对评港息见的真实性公正性负责。<br/>
                    四、本人保证设入足够的时间精力，按时参加大赛评选相关工作，并感通过电子部件、 芋机信和电等方式供得大组会有关评选工作的
                    通知信息。<br/>
                    五、本人与参赛企业或队在在利害关嘉，可能影 评工作的公正本人将及时向大赛组费会声明共提出道申通 ，如发现其他评委也存在相同情，本人也将及
                    时向大赛组委会反映情况。<br/>
                    六、未经大赛组委会授权，本人不以任式与参赛企业或个人联系。<br/>
                    七、未经大赛组委会授权，本人不以大赛评要名义参与任何与大赛评选无关的活动，也不以大赛评要名义对外发表任何评论。<br/>
                    八、本人担任本次大赛的评委已经取得了应当取得的所有授权，许司，同息、批住，并不会违反对本人适用的法律 、
                    法规或本人已经签订的合同；协议或其他文件。<br/>
                    九、本人承诺只在大赛组委会授权的范国内进行评进工作，不超授权权，并且不利用职务之便为目身、他人以及所在工作机构谋得利益。<br/>
                </p>
            </div>
            <template #footer>
                <div class="dialog-footer">
                    <el-button type="primary" @click="toAgree">我已阅读并同意</el-button>
                    <el-button type="info" @click="toUnAgree">不同意</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import { ref,onMounted } from 'vue';
import {useGlobStore} from '@/stores/useGlobStore'
import {ElMessage } from 'element-plus';
import {useRouter } from 'vue-router'
import { storeToRefs} from 'pinia'
import {getReviewList} from '@/api/review'

const store = useGlobStore();
const {isAgree,tableData} = storeToRefs(store);
const router = useRouter();
const counts = ref(0);
const page = ref(1);
const pageSize = ref(900);

//作品名称
const input = ref('');
//状态值
const value = ref('');

const options = [
  {
    value: '',
    label: '全部',
  },
  {
    value: '0',
    label: '待评审',
  },
  {
    value: '1',
    label: '已评审',
  }
]

const init = ()=>{
    if(localStorage.getItem('dsUser'))
    {
        getReviewList({pageNum: page.value,pageSize: pageSize.value,isApprove: value.value, title: input.value })
        .then((res:any)=>{
            if(String(res.data.code) === '200')
            {
                console.log(res.data)
                ElMessage({showClose: true,message: "操作成功",type: 'success'});
                store.setTableData(res.data.data.rows);
                counts.value = res.data.data.total;
            }else{
                ElMessage({showClose: true,message: '操作失败',type: 'error'});
                console.log(res);
            }
        }).catch((err:any)=>{console.log(err);}) 
    }
    else
    {
        store.setIsLogin(true);
        router.push("/home");
    }
}

//同意承诺书
const toAgree = ()=>{
    store.setIsAgree(false);
}
//同意承诺书则回退到首页
const toUnAgree = ()=>{
    router.push("/home");
}

//模糊查询
const likeData = ()=>{
    init();
}

//进入评分页面
const toReviewShow = (id:any,index:any)=>{
    store.setReviewId(id);
    store.setReviewIndex(index);
    router.push('/reviewShow');
}

const handleSizeChange = (val:any)=>{            
  pageSize.value = val;
  init();
};
const handleCurrentChange = (val:any)=>{            
  page.value = val;
  init();
};


onMounted(()=>{
    init();
})
</script>

<style scoped>
#review
{
    margin: 0;
    width: 100%;
    height: auto;
    background-color: #efefef;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow:auto;
}
.cText
{
    width: 100%;
    background-color: #ffffff;
    margin-left: 6vw;
    margin-right: 6vw;
    margin-bottom: 2vw;
    padding: 2vw;
    overflow:auto;
}
.TImg
{
    width: 100%;
    height: 6vw;
    background: url("../assets/img/组 2 拷贝@2x.png") no-repeat center;
    background-size: 100% 100%;
    padding-top: 2vw;
}
.TImg span
{
    font-size: 1.8vw;
    font-weight: 500;
    color: #ffffff;
    margin-left: 3vw;
}
.chenluo h2
{
    text-align: center;
}
.chenluo p
{
    font-size: 1.1vw;
    line-height: 2.1vw;
}
.tab
{
    width: 100%;
    height: auto;
    display: flex;
    margin-top: 1.6vw;
    
}
</style>